import React, { Fragment, useEffect } from 'react'
import DragWrapper from '../DragWrapper'
import DropWrapper from '../DropWrapper'
import { useRecoilValue } from 'recoil'
import { designerState } from '../../../store'

interface IProps {
  pageData?: any,
  noDrop?: any,
  children?: any
}

export default function Render (props: IProps) {
  const { pageData, noDrop } = props
  const preview = useRecoilValue(designerState.isPreviewAtom)

  useEffect(() => {
    // console.log('render - pageData', pageData)
  }, [pageData])
  
  return (
    <Fragment>
    {
      pageData.length > 0
      ?
      pageData.map((item: any, index: number) => {
        // 获取预览组件
        const Component = item.meta.componentPreview
        
        if (!Component) {
          return <span>找不到组件: { item.meta.name }</span>
        }
        if (!preview) {
          if (noDrop) {
            // console.error('======= 28 =======')
            return (
              <DragWrapper {...item} key={index} >
                <Component {...item} key={item.meta.id}></Component>
              </DragWrapper>
            )
          } else {
            // console.warn('======= 34 =======', item.meta)
            return (
              <DragWrapper {...item} key={index} >
                <DropWrapper {...item} dragType={item.meta.type} parent={item.meta.parent} >
                  <Component {...item} style={{marginTop:'16px'}} key={item.meta.id} ></Component>
                </DropWrapper>
              </DragWrapper>
            )
          }
        } else {
          return <Component key={item.meta.id} {...item} />
        }
      })
      :
      null
    }
    </Fragment>
  )
}